<template>
  <Modal v-model:visible="showModal" title="公路-货运量" width="60vw">
    <div class="flex flex-col">
      <div class="flex flex-row items-center mb-1">
        <a-select
          v-model:value="searchParams.year"
          :options="utils.genSelectOptions('year')"
          @change="loadData"
        ></a-select>
      </div>
      <vxe-table
        :loading="true"
        v-bind="customTableStyle"
        :data="tableData"
        class="custom-vxe-table"
      >
        <vxe-column field="year" title="年份" width="80">
          <template #default="{ row }"> {{ row.year }}年 </template>
        </vxe-column>
        <vxe-column field="month" title="月份" width="80" :sortable="true">
          <template #default="{ row }"> {{ row.month }}月 </template>
        </vxe-column>
        <vxe-column field="theVolume" title="货运量(万吨)" minWidth="100" :sortable="true">
          <template #default="{ row }">
            {{ row.theVolume }}
          </template>
        </vxe-column>
        <vxe-column field="theVolumeTb" title="货运量同比增幅" minWidth="100" :sortable="true">
          <template #default="{ row }">
            {{ row.theVolumeTb ? row.theVolumeTb.toFixed(2) + '%' : '/' }}
          </template>
        </vxe-column>
        <vxe-column field="theVolumeHb" title="货运量环比增幅" minWidth="100" :sortable="true">
          <template #default="{ row }">
            {{ row.theVolumeHb ? row.theVolumeHb.toFixed(2) + '%' : '/' }}
          </template>
        </vxe-column>
        <vxe-column
          field="goodsTurnoverVolume"
          title="货物周转量(万吨公里)"
          minWidth="100"
          :sortable="true"
        >
          <template #default="{ row }">
            {{ row.goodsTurnoverVolume }}
          </template>
        </vxe-column>
        <vxe-column
          field="goodsTurnoverVolumeTb"
          title="货物周转量同比增幅"
          minWidth="100"
          :sortable="true"
        >
          <template #default="{ row }">
            {{ row.goodsTurnoverVolumeTb ? row.goodsTurnoverVolumeTb.toFixed(2) + '%' : '/' }}
          </template>
        </vxe-column>
        <vxe-column
          field="goodsTurnoverVolumeHb"
          title="货物周转量环比增幅"
          minWidth="100"
          :sortable="true"
        >
          <template #default="{ row }">
            {{ row.goodsTurnoverVolumeHb ? row.goodsTurnoverVolumeHb.toFixed(2) + '%' : '/' }}
          </template>
        </vxe-column>
      </vxe-table>
    </div>
  </Modal>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import Modal from '@/components/modal.vue'
import { Apis } from '@/api'
import { message } from 'ant-design-vue'
import * as utils from '../../utils'

const isLoading = ref(false)

const showModal = ref(false)

const searchParams = ref({
  year: '',
})
const tableData = ref<any[]>([])

// 统一管理表格样式
const customTableStyle = {
  ...utils.customTableStyle,
  footerMethod: ({ columns, data }) => {
    const footerData = [
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计'
        }
        if (['theVolume'].includes(column.field)) {
          return (utils.sumNum(data, column.field) || '') + '万吨'
        }
        if (['goodsTurnoverVolume'].includes(column.field)) {
          return (utils.sumNum(data, column.field) || '') + '万吨公里'
        }

        return ''
      }),
    ]
    return footerData
  },
}

function closeModal() {
  showModal.value = false
}
function loadData() {
  isLoading.value = true
  Apis.szbt.highwayTransportData
    .get_list({
      params: {
        year: searchParams.value.year,
      },
    })
    .then((res) => {
      tableData.value = (res.rows || [])
        .filter((item) => item.year == searchParams.value.year)
        .sort((a: any, b: any) => {
          // 先按年份倒序
          if (b.month !== a.month) {
            return a.month - b.month
          }
        })
        .map((item: any, index: number) => {
          item.index = index + 1
          return item
        })

      // 计算货物周转量
      const totalGoodsTurnoverVolume = tableData.value.reduce(
        (sum, item) => sum + (item.goodsTurnoverVolume || 0),
        0,
      )
      tableData.value = tableData.value.map((item) => {
        item.goodsTurnoverVolumeRate = (
          (item.goodsTurnoverVolume / totalGoodsTurnoverVolume) *
          100
        ).toFixed(2)
        return item
      })

      // 计算货运量
      const totalTheVolume = tableData.value.reduce((sum, item) => sum + (item.theVolume || 0), 0)
      tableData.value = tableData.value.map((item) => {
        item.theVolumeRate = ((item.theVolume / totalTheVolume) * 100).toFixed(2)
        return item
      })

      // const totalPassengerCount = tableData.value.reduce((sum, item) => sum + (item.passengerVolume || 0), 0);
      // tableData.value = tableData.value.map(item => {
      //   const passengerCount = item.passengerVolume || 0;
      //   item.passengerCountPercentage = totalPassengerCount ? ((passengerCount / totalPassengerCount) * 100).toFixed(2) : 0;
      //   return item;
      // });
    })
    .catch((err) => {
      message.error('获取数据失败')
    })
    .finally(() => {
      isLoading.value = false
    })
}

defineExpose({
  setData: (data: any) => {
    const { params } = data
    searchParams.value = params
    // tableData.value = data;
  },
  open: () => {
    showModal.value = true
    loadData()
  },
})
</script>

<style lang="scss" src="@/styles/custom-vxe-table.scss">
.flex-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 例如，设置容器高度为视窗的100% */
}
</style>
